<!-- ConfirmDialog.vue -->
<template>
	<view class="overlay" v-if="visible" @click.self="cancel">
		<view class="dialog">
			<view class="icon-container">
				<view class="icon">!</view>
			</view>
			<view class="message">{{ message }}</view>
			<view class="buttons">
				<button class="btn cancel-btn" @click="cancel">取消</button>
				<button class="btn confirm-btn" @click="confirm">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			message: {
				type: String,
				default: '是否确认此操作？'
			},
			type: {
				type: String,
				default: 'warning'
			}
		},
		methods: {
			confirm() {
				this.$emit('confirm');
			},
			cancel() {
				this.$emit('cancel');
			}
		}
	}
</script>

<style scoped>
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.65);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.dialog {
		background: white;
		padding: 30rpx;
		border-radius: 16rpx;
		width: 80%;
		max-width: 600rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.icon-container {
		display: flex;
		justify-content: center;
		margin-bottom: 24rpx;
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
		background: #FFF3E5;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 48rpx;
		color: #FF9800;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.message {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 32rpx;
		padding: 0 20rpx;
		line-height: 1.5;
		text-align: center;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		gap: 20rpx;
	}

	.btn {
		flex: 1;
		padding: 20rpx 0;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 500;
		border: none;
	}

	.cancel-btn {
		background: #F5F5F5;
		color: #666;
	}

	.confirm-btn {
		background: linear-gradient(135deg, #1890FF 0%, #0076FF 100%);
		color: white;
		box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.2);
	}

	/* 不同类型的图标样式 */
	.icon.warning {
		background: #FFF3E5;
		color: #FF9800;
	}

	.icon.success {
		background: #E6F7E9;
		color: #52C41A;
	}

	.icon.error {
		background: #FFF1F0;
		color: #FF4D4F;
	}
</style>